<template>
  <div>
        <My-button>
            <!-- 向匿名插槽插入内容 -->
            <img src="../assets/logo.png" width="20px" height="20px" alt="">
          
            <!-- 向命名插槽one里面插入内容 -->
            <template v-slot:one>
                <h3>我是h3</h3>
            </template>
            <!-- 向作用域插槽里面插入内容    v-slot可以用#代替 -->
            <template v-slot:two="demo">        
                <span>
                    {{demo.data}}
                </span>
            </template>
        </My-button>
        <My-list :arr="arr" >
            <template v-slot:one="{data}">
                <img src="../assets/logo.png" width="30px" height="30px" alt="">
                <span style="color:red;">{{data}}</span>
            </template>
        </My-list>
  </div>
</template>

<script>
import MyButton from '../components/MyButton.vue'
import MyList from '../components/MyList.vue'

export default {
    components:{
        MyButton,
        MyList
    },
    data(){
        return{
            val:'',
            arr:['张三','李四',"王五",'老刘']
        }
    }
}
</script>

<style>

</style>